<template>
  <div class="container">
    <h2 v-show="route.path == '/weather'">近期天气</h2>
    <div class="chart-box">
      <div class="weather-info">
        <div
          class="weather-info-item"
          v-for="item in weatherStore.weatherInfos"
          :key="item.date"
        >
          <span>{{ item.week }}</span>
          <span>{{ item.date }}</span>
          <span>{{ item.dayweather }}</span>
          <span>风力 {{ item.daypower }}级</span>
        </div>
      </div>
      <div class="weather-chart">
        <v-echart :option="weatherStore.chartOption"></v-echart>
      </div>
    </div>
  </div>
</template>
<script setup>
import { onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { useWeatherStore } from '@/stores/WeatherStore'
const weatherStore = useWeatherStore()
const route = useRoute()
onMounted(async () => {
  const key = route.params.key || ''
  await weatherStore.getWeatherData(key)
})
</script>
<style scoped lang="scss">
.container {
  .chart-box {
    padding: 2.5rem 3rem;
    margin-top: 8px;
    border-radius: 0.25rem;
    background-color: #004e71;
    .weather-info {
      display: flex;
      gap: 1.5rem;
      .weather-info-item {
        display: flex;
        flex: 1 1 0;
        gap: 1rem;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }
    }
    .echarts {
      margin-top: 1.5rem;
      width: 1120px;
      height: 160px;
    }
  }
}
</style>
